<template>
	<div id="nav">
		<router-link to="/">Home</router-link> |
		<router-link to="/about">About</router-link> |
		<router-link to="/users">User</router-link> |
		<router-link :to="{ name: 'User', params: { id: 789 } }">User</router-link>
	</div>

	{{ id }}
	<button @click="id++">change id</button>

	<!-- 展示子组件 -->
	<!-- <router-view class="view left-sidebar" name="LeftSidebar"></router-view>
	<router-view class="view main-content"></router-view>
	<router-view class="view right-sidebar" name="RightSidebar"></router-view> -->

	<!-- <router-view v-slot="{ Component }">
		<transition name="fade">
			<component :is="Component" />
		</transition>
	</router-view> -->

	<router-view v-slot="{ Component, route }">
		<!-- 使用任何自定义过渡和回退到 `fade` -->
		<transition :name="route.meta.transition || 'fade'">
			<component :is="Component" />
		</transition>
	</router-view>

</template>

<script>
	export default {
		data() {
			return {
				id: 123,
			};
		},
	};
</script>


<style>
.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.5s linear;
}

.slide-right-enter-from,
.slide-right-leave-to {
	transform: translateX(200px);
}

.slide-right-enter-active,
.slide-right-leave-active {
	transition: all 0.5s linear;
}

#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
}

#nav {
	padding: 30px;
}

#nav a {
	font-weight: bold;
	color: #2c3e50;
}

#nav a.router-link-exact-active {
	color: #42b983;
}
</style>
